<template>
	<div class="details">
		<div class="detailTop" >
			<div v-show="isLoading">
				<img class="loading" src="../../../assets/images/movieClips/11/logo.png" alt="" />
			    <div class="loadingText">片花加载中...</div>
			</div>
			<router-link :to='{name:"movieClips"}' >
	    		<img class="goback"  src="../../../assets/images/movieClips/4/f-1.png" alt="" />
			</router-link>
			<div class="videoTitle">{{currentFilmTitle}}</div>
			<video  :src="currentFilmUrl"
				controls="controls" autoplay="autoplay"  loop="loop" width="100%"></video>
		    <!--<img class=" fullScreen" src="../../../../assets/images/movieClips/11/全屏-1.png" alt="" />-->
		</div>
		<div class="menu">
			<router-link :to="{path:'comment',query:{id:nowId}}" >神评论</router-link>
			<router-link :to="{path:'summary',query:{id:nowId}}" >内容简介</router-link>
			<router-link :to="{path:'anthology',query:{id:nowId}}">选集</router-link>
		</div>
		<router-view></router-view>
	</div>
</template>

<script>
export default{
	name:"detail",
	data(){
		return{
			isLoading:false,
			currentFilmTitle:'',
			currentFilmId:0,
			currentFilmUrl:'',
			nowId:0
		}
	},
	methods:{
	},
	created(){
		
		//拿到地址中带的参数信息
		var query=this.$route.query;
		var currentId=query.id;
		var filmTitle=query.item.filmTiTle;
		var filmDetails=query.item.details;
		
		//缓存第几个电视剧的数据里的ID
		localStorage.currentId=query.id;
		//缓存标题
		localStorage.filmTitle=query.item.filmTiTle;
		//缓存电视的相关信息
		localStorage.filmDetails=JSON.stringify(query.item.details);
		
//		console.log(query.item)
//		console.log(localStorage)
        if(query.id&&filmDetails){
        	var currentFilmUrl='';
			for(var i=0;i<filmDetails.length;i++){
				currentFilmUrl=filmDetails[this.currentFilmId].filmUrl;
			}
			this.currentFilmUrl=currentFilmUrl;
			this.currentFilmTitle=filmTitle;
        }else{
//      	console.log(1)
        	//从本地储存获取视频信息
//      	console.log(localStorage)
        	var localStorageFilm=localStorage.getItem('filmDetails');
//      	console.log(localStorageFilm)
//			var newFilmDetails=JSON.parse(localStorageFilm);
//			//当前播放的视频地址
//			var newCurrentFilmUrl='';
//			for(var j=0;j<newFilmDetails.length;j++){
//				newCurrentFilmUrl=newFilmDetails[this.currentFilmId].filmUrl;
//			}
//			this.currentFilmUrl=newCurrentFilmUrl;
//			//从本地储存获取视频标题信息
//			this.currentFilmTitle=localStorage.getItem('filmTitle');
//			//从本地储存获取的视频id信息
//			this.nowId=localStorage.getItem('currentId');
        }
	}
}
</script>

<style scoped lang="less">
@current:100rem;
	.details{
		.detailTop{
			.goback{
				position: absolute;
				width: 30/@current;
				height: 40/@current;
				left: 20/@current;
				top: 20/@current;
				z-index: 444;
		    }
			position: relative;
			width: 100%;
			height: 360/@current;
			background: url('../../../assets/images/movieClips/11/视频区域底.png') no-repeat;
			.loadingText{
				position: absolute;
			    bottom: 68/@current;
			    left: 250/@current;
			    color: white;
			    font-size:24/@current ;
			}
			.loading{
				position: absolute;
			    bottom: 110/@current;
			    left: 200/@current;
				display: block;
				margin-top: 700/@current;
				width: 240/@current;
				height: 120/@current;
			}
			.fullScreen{
				height: 30/@current;
				width:30/@current ;
				position: absolute;
			    bottom: 20/@current;
			    right: 30/@current;
			}
			.videoTitle{
				margin-left: 260/@current;
				margin-top: 20/@current;
				text-align: center;
				position: absolute;
				font-size: 30/@current;
				color: white;
		    }
		}
		.menu{
		    font-size: 26/@current;
		    padding: 20/@current 20/@current;
		    a{
		    	display: block;
		    	width: 200/@current;
		        height: 60/@current;
		        border: 1px solid #aa5ae9;
		        float: left;
		        line-height: 60/@current;
		        text-align: center;
		        color: #aa5ae9;
		        box-sizing: border-box;
		    }
		    a:nth-child(1){
		    	border-radius: 12/@current 0 0 12/@current;
		    }
		    a:nth-child(3){
		    	border-radius:0 12/@current  12/@current 0;
		    }
		    .active{
		    	background-color: #aa5ae9;
		    	color: white;
		    }
		}
	}
</style>